<template name='lists'>
    <div class="board-canvas">
        <div id="board" class="lists fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable">
            {{# each board.lists }}
                <div class="list">
                    <div class="list-header js-list-header non-empty clearfix {{# if currentUser.isBoardMember }}editable{{/ if }}">
                        <h2 class="list-header-name js-list-name current {{# if currentUser.isBoardMember }}hide-on-edit{{/ if }}">{{ title }}</h2>
                        {{ > listTitleEditForm list=this }}
                        {{# if currentUser.isBoardMember }}
                            <a href="#" class="list-header-menu-icon icon-sm fa fa-bars dark-hover js-open-list-menu"></a>
                        {{/ if }}
                    </div>
                    {{ > cards cards=cards listId=_id board=board }}
                </div>
            {{/each}}
            {{ > addlistForm }}
        </div>
    </div>
</template>

<template name="listTitleEditForm">
    <form id="ListTitleEditForm">
        <div class="edit edit-heavy clearfix">
            <input type="text" class="field fieldSingle single-line js-title-input" value="{{ list.title }}">
            <div class="edit-controls clearfix">
                <input type="submit" class="primary confirm js-save-edit" value="{{_ 'save'}}">
                <a href="#" class="icon-lg fa fa-times dark-hover cancel js-cancel-edit"></a>
            </div>
        </div>
    </form>
</template>

<template name="addlistForm">
    {{# if currentUser.isBoardMember }}
        <div class="list add-list idle">
            <form id="AddListForm">
                <span class="placeholder js-open-add-list">{{_ 'add-list'}}</span>
                <input type="text" class="list-name-input" placeholder="{{_ 'add-list'}}" autocomplete="off">
                <div class="edit-controls keep clearfix">
                    <input type="submit" class="primary confirm js-save-edit" value="{{_ 'save'}}">
                    <a href="#" class="icon-lg fa fa-times dark-hover cancel js-cancel-edit"></a>
                </div>
            </form>
        </div>
    {{/ if }}
</template>

<template name="listActionPopup">
    <ul class="pop-over-list">
        <li><a class="js-add-card" href="#">{{_ 'add-card'}}</a></li>
        <li><a class="highlight-icon js-list-subscribe" href="#">{{_ 'subscribe'}}</a></li>
    </ul>
    {{# if cards.count }}
        <hr>
        <ul class="pop-over-list">
            <li><a class="js-move-cards" href="#">{{_ 'list-move-cards'}}</a></li>
            <li><a class="js-archive-cards" href="#">{{_ 'list-archive-cards'}}</a></li>
        </ul>
    {{/if}}
    <hr>
    <ul class="pop-over-list">
        <li><a class="js-close-list" href="#">{{_ 'archive-list'}}</a></li>
    </ul>
</template>

<template name="listMoveCardsPopup">
    <ul class="pop-over-list">
        {{#each board.lists}}
        <li>
            {{#if isTrue ../_id _id}}
                <a class="highlight-icon disabled">{{title}} (current)</a>
            {{else}}
                <a class="js-select-list highlight-icon">{{title}}</a>
            {{/if}}
        </li>
        {{/each}}
    </ul>
</template>

<template name="listArchiveCardsPopup">
    <p>{{_ 'list-archive-cards-pop'}}</p>
    <input type="submit" class="js-confirm negate full" value="{{_ 'archive-all'}}">
</template>
